<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
</div>

<!-- 1、打包命令：webpack src/main.js dist/bundle.js -->
<!-- 2、需要webpack.config.js，（1）npm init 生成package.json文件（2）在script中增加"build": "webpack" （3）npm run build-->
<!-- loader是一种打包，webpack只能用来处理js代码，并且webpack会自动处理js之间的相互关系 -->
<!--
npm install --save-dev css-loader
npm install style-loader --save-dev
npm install --save-dev less-loader less
npm install --save-dev url-loader
npm install --save-dev file-loader
-->

<!-- vue
1、安装，npm install vue --save
2、runtime-only->代码中，代码中不可以有任何的template,runtime-compiler,代码中可以有template，因为compiler编译
3、在webpack.config.js中指定别名
    resolve:{
        alias:{
            'vue$':'vue/dist/vue.esm.js'
        }
    }
4、vue的终极使用策略，使用.vue，npm install --save-dev vue-loader vue-template-compiler
创建vue，然后import App from './vue/App.vue'
-->

<!--
 插件的使用
 1、package.json查看插件，首先webpack需要有，"webpack": "^3.6.0"
 使用BannerPlugin,在webpack.config.js中
 const webpack = require('webpack')
 plugins:[
    new webpack.BannerPlugin('最终版权归小星星所有')
 ]

 2、html，npm install --save-dev html-webpack-plugin
 const HtmlWebpackPlugin = require('html-webpack-plugin')
 plugins:[
    new HtmlWebpackPlugin({
        template: 'index.html'
    })
 ]

 3、压缩js，uglifyjs-webpack-plugin，
 npm install uglifyjs-webpack-plugin@1.1.1 --save-dev

 const uglifyjsPlugin = require('uglifyjs-webpack-plugin')
 plugins:[
    new uglifyjsPlugin()
 ]
 -->

<!--
搭建本地服务器
1、安装，npm install --save-dev webpack-dev-server@2.9.3
2、在package.json的script中配置"dev": "webpack-dev-server"
3、配置参数，在module.export中
devServer:{
    contentBase:'./dist',
    inline:true
}
3、使用命令，npm run dev
-->

<!--
配置文件的分离
1、npm install webpack-merge --save-dev
2、使用
const baseconfig = require('./base.config')
const webpackMerge = require('webpack-merge')
module.exports = webpackMerge(baseConfig, {
    plugins:[
        new UglifyjsWebpackPlugin()
    ]
})
-->
<script src="./dist/bundle.js"></script>
</body>
</html>